var content = document.getElementById('content');
var num = 5;
// 定义分数累加器；
var score = 0;
//------------------------------------------------------------------------------------------------
// 添加新格子
function  addDiv(classname) {
    var pd = document.createElement('div');
    // 定义随机数，随机添加黑格子功能；
    var index = Math.floor(Math.random() *3);
    // 一行添加四个格子
    for (var i = 0;i < 3;i++) {
        var sd = document.createElement('div');
        pd.appendChild(sd);
        sd.style.class = 'black'; 
    }
    // 判断子级个数是否为0
    if(content.children.length == 0) {
        // 为0向后添加子级
        content.appendChild(pd);
    } else{
        // 不为0，向父级的子级第一个位置进行插入（使用insertbefore，向前面插入元素）
        content.insertBefore(pd,content.children[0]);
    }
    // 通过形参传入的参数，设置pd的classname；
    pd.className = classname;
    // 将随机选中的格子的classname改为black，将其背景颜色设置为黑色；
    pd.children[index].className = 'black';

    // 如果content中的子级内容等于6时，删除最后的子级元素；
    if(content.children.length == 5){
        content.removeChild(content.children[content.children.length - 1]);
    }
}
// 创建格子对象；
var tobj = {
    addDiv : addDiv,
    yidong : setInterval(function yidong() {
            var tops = parseInt(getComputedStyle(content, null)['top']) + num;
            content.style.top = tops + 'px';
            if (tops >= 0) {
                addDiv('pd');
                content.style.top = -120 + 'px'; 
            }
            var body = document.body;
            // 使用call方法调用userclick，并将content传到this中；
            userclick.keydown.call(body);
    },20)
}
//------------------------------------------------------------------------------------------------
// 用户点击
/*
    1.KeyboardEvent.key -- 返回用户按下的物理按键的值；(按键名称)；
    只读属性；
    值可能会随键盘布局或修饰键的状态改变；

    2.KeyboardEvent.code属性表示键盘上的物理键（与按键生成的字符相对）。
    此属性返回一个值，该值不会被键盘布局或修饰键的状态改变。
*/
function userclick(obj) {
    this.keydown = function(obj) {
        body = document.body;
        body.addEventListener('keydown',function(obj) {
            switch(obj.code) {
                // 上方向键；
                case  'ArrowLeft':
                    // 判断最后一行中对应键盘左箭头的格子颜色是否为黑色；
                    if(content.lastElementChild.children[0].className == 'black') {
                        // 为黑色按下左箭头后，改为灰色；
                        content.lastElementChild.children[0].className = 'grey';
                        // 加分；
                        score++;
                        // 修改页面显示分数；
                        scores.innerHTML = '得分:' + score;
                    } else if(content.lastElementChild.children[0].className != 'grey'){
                        /*
                            结束游戏
                                判断键盘按下时，对应的元素不是黑色也不是灰色，就结束游戏；
                        */
                        content.style.display = 'none';
                        begin.style.display = 'block';
                        // 开始游戏按钮显示为重新开始；
                        begin.innerHTML = '重新开始';
                        // 隐藏分数显示；
                        scores.style.display = 'none';
                        // 隐藏秒数显示；
                        mins.style.display = 'none';
                        // 显示最终得分；
                        overscore.style.display = 'block';
                        // 更改最终得分；
                        overscore.innerHTML = '最终得分:' + score;
                        // 更改最终用时；
                        overmins.innerHTML = '用时:' + t;
                        // 显示最终用时；
                        overmins.style.display = 'block';
                    }
                    break;
                // 下方向键；
                case 'ArrowDown' :
                    if(content.lastElementChild.children[1].className == 'black') {
                        content.lastElementChild.children[1].className = 'grey';
                        score++;
                        scores.innerHTML = '得分:' + score;
                    }else if(content.lastElementChild.children[1].className != 'grey'){
                        content.lastElementChild.children[1].className = 'red';
                        content.style.display = 'none';
                        begin.style.display = 'block';
                        begin.innerHTML = '重新开始';
                        scores.style.display = 'none';
                        mins.style.display = 'none';
                        overscore.innerHTML = '最终得分:' + score;
                        overscore.style.display = 'block';
                        overmins.innerHTML = '用时:' + t;
                        overmins.style.display = 'block';
                    }
                    break;
                // 右方向键；
                case 'ArrowRight' :
                    if(content.lastElementChild.children[2].className == 'black') {
                        content.lastElementChild.children[2].className = 'grey';
                        score++;
                        scores.innerHTML = '得分:' + score;
                    }else if(content.lastElementChild.children[2].className != 'grey'){
                        content.lastElementChild.children[2].className = 'red';
                        content.style.display = 'none';
                        begin.style.display = 'block';
                        begin.innerHTML = '重新开始';
                        scores.style.display = 'none';
                        mins.style.display = 'none';
                        overscore.innerHTML = '最终得分:' + score;
                        overscore.style.display = 'block';
                        overmins.innerHTML = '用时:' + t;
                        overmins.style.display = 'block';
                    }
            }
        })
    }
}

// 创建用户点击对象；
var userclick = new userclick();
//------------------------------------------------------------------------------------------------
// 游戏
function game(obj) {
    // 计时器；
    startime = new Date().getTime();
    this.jishi = setInterval(function jishi(){
        retain();
    },460)
    function retain() {
        nowtime = new Date().getTime();
        // 页面显示计时；
        if(content.style.display == 'block') {
            t = (nowtime - startime)/1000 + 's';
            mins.innerHTML = '时长:' + t;
        }
    }
}
// 开始游戏按钮；
begin.onclick = function() {
    if (content.children.length) {
        content.innerHTML = '';
    }
    // 调用格子对象中的移动方法；
    tobj.yidong;
    //调用游戏对象中的计时方法；
    // usergame.jishi;
    // 点击后将content显示出；
    content.style.display = 'block';
    // 将本身按钮隐藏；
    begin.style.display = 'none';
    // 将计时显示出；
    mins.style.display = 'block';
    // 显示分数
    scores.style.display = 'block';
    // 修改分数显示为0；
    scores.innerHTML = '得分:' + '0';
    // 分数归0；
    score = 0;
    // 隐藏最终分数；
    overscore.style.display = 'none'
    // 隐藏最终秒数；
    overmins.style.display = 'none';
    // 创建游戏对象
    var usergame = new game();
}

